<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<!-- 
  收集表单数据：
  ·<input type="text"/> v-model收集的是value的值，用户输入的就是value值
  ·<input type="radio"> v-model收集的是value的值，要给标签配置value值
  ·<input type="checkbox">
   1.没有配置input的value属性，那么收集的就是checked true false
   2.配置input的value属性：
     (1) v-model的初始值是非数组，那么收集的就是checked 
     (2) v-model的初始值是数组，那么收集的就是value组成的数组
  ·备注：
  v-model的三个修饰符：
     lazy:失去焦点再收集数据
     number:输入的字符串转为有效的数字
     trim：输入首尾空格过滤
 -->
  <div id="root">
    <form @submit.prevent="demo">
      账号：<input type="text" v-model.trim="userInfo.account"><br><br>
      密码： <input type="password" v-model="userInfo.password"><br>
      年龄：<input type="number" v-model.number="userInfo.age"><br>
      性别：
      男<input type="radio" name="'sex" v-model="userInfo.sex" value="male">
      女<input type="radio" name="'sex" v-model="userInfo.sex" value="female"><br>
      爱好：<br>
      学习 <input type="checkbox" v-model="userInfo.hobby" value="study"><br>
      吃饭 <input type="checkbox" v-model="userInfo.hobby" value="eat"><br>
      打游戏 <input type="checkbox" v-model="userInfo.hobby" value="game"><br>
      所属校区
      <select v-model="userInfo.city">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
      </select><br>
      其他信息：<br>
      <textarea v-model.lazy="userInfo.other"></textarea><br>
      <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">用户协议</a><br>
      <button>提交</button><br>
    </form>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。、
    new Vue({
      el: '#root',
      data: {
        userInfo: {
          account: '',
          password: '',
          age: 18,
          sex: 'male',
          hobby: [],
          city: 'beijing',
          other: '',
          agree: ''
        }
      },
      methods: {
        demo() {
          console.log(JSON.stringify(this.userInfo));
        }
      },
    })
  </script>
</body>

</html>